<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="searchForm"
					:inline="true"
					:model="queryData"
					label-width="80px"
				>
					<el-form-item label="选择商户:">
						<merchant-select
							v-model="queryData.merchantClientId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						label="代理申请图名称:"
						label-width="120px"
						prop="applyName"
					>
						<el-input
							v-model="queryData.applyName"
							size="medium"
							placeholder="请输入"
							clearable
							style="width: 260px"
							maxlength="20"
						></el-input>
					</el-form-item>
					<el-form-item
						label="状态:"
						label-width="53px"
						prop="applyStatus"
					>
						<el-select
							v-model="queryData.applyStatus"
							size="medium"
							placeholder="默认选择全部"
							clearable
							style="width: 220px"
						>
							<el-option label="全部" value=""></el-option>
							<el-option
								v-for="item in statusArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						label="创建人:"
						label-width="67px"
						prop="createBy"
					>
						<el-input
							v-model="queryData.createBy"
							size="medium"
							placeholder="请输入"
							clearable
							style="width: 220px"
							maxlength="15"
						></el-input>
					</el-form-item>
					<el-form-item
						label="最后操作人:"
						label-width="94px"
						prop="updateBy"
					>
						<el-input
							v-model="queryData.updateBy"
							size="medium"
							placeholder="请输入"
							clearable
							style="width: 206px"
							maxlength="15"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="loadData"
						>
							查询
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							重置
						</el-button>
						<el-button
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							@click="addClick()"
						>
							新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					size="mini"
					row-key="id"
					:data="tableData"
					class="small-size-table"
					style="width: 100%;margin-top:20px"
					element-loading-spinner="el-icon-loading"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="applyName"
						align="center"
						label="代理申请图名称"
					></el-table-column>
					<el-table-column
						prop="applyRemark"
						align="center"
						label="备注"
					></el-table-column>
					<el-table-column
						prop="applyStatus"
						align="center"
						label="状态"
					>
						<template slot-scope="scope">
							<div
								v-if="scope.row.applyStatus === 0"
								class="disableRgba"
							>
								停用中
							</div>
							<div
								v-else-if="scope.row.applyStatus === 1"
								class="normalRgba"
							>
								开启中
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operator"
						align="center"
						label="图片"
					>
						<template slot-scope="scope">
							<span
								class="text-link"
								@click="
									rowData = scope.row
									imageViewerVisible = true
								"
							>
								点击预览
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createBy"
						align="center"
						label="创建人"
					></el-table-column>
					<el-table-column
						prop="createAt"
						align="center"
						label="创建时间"
					></el-table-column>
					<el-table-column
						prop="updateBy"
						align="center"
						label="最后操作人"
					></el-table-column>
					<el-table-column
						prop="updateAt"
						align="center"
						label="最后操作时间"
					></el-table-column>
					<el-table-column align="center" label="操作" width="220px">
						<template slot-scope="scope">
							<el-button
								:disabled="loading"
								:type="
									scope.row.applyStatus === 0
										? 'success'
										: 'danger'
								"
								size="medium"
								class="noicon"
								@click="changeSwitch(scope.row)"
							>
								{{
									scope.row.applyStatus === 0
										? '启用'
										: '禁用'
								}}
							</el-button>
							<el-button
								type="primary"
								icon="el-icon-edit"
								size="medium"
								:disabled="scope.row.applyStatus === 1"
								@click="edit(scope.row)"
							>
								编辑
							</el-button>
							<el-button
								type="danger"
								icon="el-icon-delete"
								size="medium"
								:disabled="scope.row.applyStatus === 1"
								@click="deleteButton(scope.row)"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-dialog
				:title="rowData ? '编辑' : '新增'"
				:visible.sync="dialogVisible"
				:destroy-on-close="true"
				width="700px"
				class="dialogStyle"
			>
				<el-divider></el-divider>
				<el-form ref="addFrom" :model="dialogData" label-width="140px">
					<el-form-item
						label="选择商户:"
						prop="merchantId"
						:rules="[
							{
								required: true,
								message: '请选择商户',
								trigger: 'change'
							}
						]"
					>
						<merchant-select
							v-model="dialogData.merchantId"
							:merchantInfo.sync="merchantInfoA"
						></merchant-select>
					</el-form-item>
					<el-form-item
						label="代理申请图片名称:"
						prop="applyName"
						:rules="[
							{
								required: true,
								message: '请输入',
								trigger: 'blur'
							}
						]"
					>
						<el-input
							v-model="dialogData.applyName"
							placeholder="请输入,最多50个字"
							maxlength="50"
							show-word-limit
							clearable
							type="text"
						></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="12">
							<el-form-item
								v-if="
									merchantInfoA.languages.indexOf('zh_CN') !==
										-1
								"
								label="代理申请图上传-中文:"
								prop="applyImg"
								:rules="[
									{
										required: true,
										message: '请上传图片',
										trigger: 'blur'
									}
								]"
							>
								<UploadItem
									ref="imgUpload-cn"
									:upload-file-type="'image'"
									:platform="'PC'"
									:uploadAPI="imageUpload"
									@upoladItemSucess="
										(file) =>
											handleUploadSucess(file, 'applyImg')
									"
									@startUpoladItem="handleStartUpload"
									@deleteUpoladItem="
										handleDeleteUpload('applyImg')
									"
									@upoladItemDefeat="
										handleUploadDefeat('applyImg')
									"
								></UploadItem>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item
								v-if="
									merchantInfoA.languages.indexOf('en_US') !==
										-1
								"
								label="代理申请图上传-英文:"
								prop="applyImgEn"
								:rules="[
									{
										required: true,
										message: '请上传图片',
										trigger: 'change'
									}
								]"
							>
								<UploadItem
									ref="imgUpload-en"
									:upload-file-type="'image'"
									:platform="'PC'"
									:uploadAPI="imageUpload"
									@upoladItemSucess="
										(file) =>
											handleUploadSucess(
												file,
												'applyImgEn'
											)
									"
									@startUpoladItem="handleStartUpload"
									@deleteUpoladItem="
										handleDeleteUpload('applyImgEn')
									"
									@upoladItemDefeat="
										handleUploadDefeat('applyImgEn')
									"
								></UploadItem>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item
								v-if="
									merchantInfoA.languages.indexOf('th_TH') !==
										-1
								"
								label="代理申请图上传-泰文:"
								prop="applyImgTh"
								:rules="[
									{
										required: true,
										message: '请上传图片',
										trigger: 'blur'
									}
								]"
							>
								<UploadItem
									ref="imgUpload-th"
									:upload-file-type="'image'"
									:platform="'PC'"
									:uploadAPI="imageUpload"
									@upoladItemSucess="
										(file) =>
											handleUploadSucess(
												file,
												'applyImgTh'
											)
									"
									@startUpoladItem="handleStartUpload"
									@deleteUpoladItem="
										handleDeleteUpload('applyImgTh')
									"
									@upoladItemDefeat="
										handleUploadDefeat('applyImgTh')
									"
								></UploadItem>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item
								v-if="
									merchantInfoA.languages.indexOf('vi_VN') !==
										-1
								"
								label="代理申请图上传-越南文:"
								prop="applyImgVn"
								:rules="[
									{
										required: true,
										message: '请上传图片',
										trigger: 'blur'
									}
								]"
							>
								<UploadItem
									ref="imgUpload-vn"
									:upload-file-type="'image'"
									:platform="'PC'"
									:uploadAPI="imageUpload"
									@upoladItemSucess="
										(file) =>
											handleUploadSucess(
												file,
												'applyImgVn'
											)
									"
									@startUpoladItem="handleStartUpload"
									@deleteUpoladItem="
										handleDeleteUpload('applyImgVn')
									"
									@upoladItemDefeat="
										handleUploadDefeat('applyImgVn')
									"
								></UploadItem>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item
						label="备注:"
						prop="applyRemark"
						:rules="[
							{
								required: true,
								message: '请输入',
								trigger: 'blur'
							}
						]"
					>
						<el-input
							v-model="dialogData.applyRemark"
							placeholder="请输入,最多50个字"
							maxlength="50"
							show-word-limit
							clearable
							type="textarea"
							v-input="{ name: 'noEmpty' }"
						></el-input>
					</el-form-item>
				</el-form>
				<el-divider></el-divider>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="subAddOrEidt">
						确认
					</el-button>
					<el-button @click="dialogVisible = false">
						取消
					</el-button>
				</div>
			</el-dialog>
			<image-viewer
				:visible.sync="imageViewerVisible"
				:url-list="[rowData ? rowData.applyImg : '']"
			/>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import Sortable from 'sortablejs'
import { routerNames } from '@/utils/consts'
import {
	queryProxyApplyList,
	queryProxyApplyAdd,
	queryProxyApplyEdit,
	queryProxyApplyUpStatus,
	queryProxyApplyDel
} from '@/api/operation'
import { mapGetters } from 'vuex'
export default {
	name: routerNames.agentApplyimage,
	components: { UploadItem: () => import('@/components/UploadItem') },
	mixins: [list],
	data() {
		return {
			queryData: {},
			tableData: [],
			dialogVisible: false,
			dialogData: {
				merchantId: undefined,
				applyName: '',
				applyRemark: '',
				applyImg: '',
				applyImgEn: '',
				applyImgTh: '',
				applyImgVn: ''
			},
			addOrEdit: 0,
			rowData: {},
			imageViewerVisible: false,
			pageNum: 1,
			pageSize: 100,
			total: 0,
			merchantInfoA: {
				languages: 'zh_CN'
			}
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		getMerchantInfo() {
			return this.merchantInfo
		},
		statusArr() {
			return [
				{ code: 0, description: this.$t('common.status_disabled') },
				{ code: 1, description: this.$t('common.status_turn_on') }
			]
			// return [
			// 	{ code: 0, description: '禁用' },
			// 	{ code: 1, description: '启用' }
			// ]
			// return this.globalDics.operateStatus || []
		},
		imageSize1() {
			return {
				width: 750,
				height: 680
			}
		},
		fileSize() {
			return 5 * 1024 * 1024
		},
		imageUpload() {
			// return this.$api.imageUploadAPI
			return this.$api.imageUpload
		}
	},
	watch: {
		getMerchantInfo: {
			handler(newV, oldV) {
				if (newV || Object.keys(newV).length) {
					this.queryData.merchantClientId = newV.id
					this.loadData()
				}
			},
			deep: true
		}
	},
	created() {
		if (Object.keys(this.getMerchantInfo).length) {
			this.queryData.merchantClientId = this.getMerchantInfo.id
			this.loadData()
		}
	},
	mounted() {
		// this.setSort()
	},
	methods: {
		reset() {
			this.$refs.searchForm.resetFields()
			this.loadData()
		},
		loadData() {
			this.loading = true
			const params = {
				...this.queryData,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			queryProxyApplyList(params)
				.then((res) => {
					if (res?.code === 200) {
						this.tableData = res.data.record || []
						this.total = res.data.totalRecord
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		addClick() {
			this.rowData = null
			this.dialogData = this.$options.data.call(this).dialogData
			this.dialogVisible = true
		},
		changeSwitch(val) {
			this.loading = true
			queryProxyApplyUpStatus({
				id: val.id,
				status: val.applyStatus ? 0 : 1
			}).then((res) => {
				this.loading = false
				if (res.code === 200) {
					this.$message.success(this.$t('common.modify_success'))
					this.loadData()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 编辑
		edit(row) {
			this.rowData = { ...row }
			for (const k in this.dialogData) {
				this.dialogData[k] = row[k]
			}
			this.dialogVisible = true
		},
		closeOrReset() {
			if (this.addOrEdit === 0) {
				this.dialogVisible = false
			} else {
				this.dialogData = { ...this.rowData }
			}
		},
		deleteButton(val) {
			const data = {}
			data.id = val.id
			data.merchantClientCode = val.merchantId
			this.$confirm(
				`<strong>确定删除此条标签类型吗?</strong>`,
				`确认提示`,
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			)
				.then(() => {
					queryProxyApplyDel(data).then((res) => {
						if (res?.code === 200) {
							this.$message.success('删除成功')
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		subAddOrEidt() {
			this.$refs.addFrom.validate((valid) => {
				const params = { ...this.dialogData }
				const sub = this.rowData
					? queryProxyApplyEdit
					: queryProxyApplyAdd
				if (this.rowData) {
					params.id = this.rowData.id
				}
				if (valid) {
					sub(params).then((res) => {
						if (res?.code === 200) {
							this.$message.success('操作成功')
							this.loadData()
						} else {
							this.$message.error(res.msg)
						}
					})
					this.dialogVisible = false
				}
			})
		},
		addOrEditDefeat(val, str) {
			// const add = `</b> <strong>已存在${num}个活动页签,无法新增</strong>`
			const add = `</b> <strong>${str}</strong>`
			const state = `</b> <strong>${str}</strong>`

			this.$alert(
				"<b class='el-icon-warning' style='font-size:24px;color:red;margin-right:5px;vertical-align: middle;'>" +
					(val === 0 ? add : state),
				'提示',
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: '确定',
					type: 'primary'
				}
			)
		},
		setSort() {
			const tbody = document.querySelector(
				'.el-table__body-wrapper tbody'
			)
			const _this = this
			Sortable.create(tbody, {
				animation: 150,
				ghostClass: 'ghost',
				onEnd({ newIndex, oldIndex }) {
					const currRow = _this.tableData.splice(oldIndex, 1)[0]
					_this.tableData.splice(newIndex, 0, currRow)
					const ids = []
					for (let i = 0; i < _this.tableData.length; i++) {
						const ele = _this.tableData[i]
						ids.push(ele.id)
					}
					_this.$api
						.getOperateActivityConfiTabUpdateSort({
							ids: ids.join(',')
						})
						.then((res) => {
							if (res.code === 200) {
								_this.$message.success('排序成功')
								_this.loadData()
							}
						})
				}
			})
		},
		handleStartUpload() {
			this.$message.info('图片开始上传')
		},
		handleUploadSucess({ index, file, id }, key) {
			this.dialogData[key] = file.imgUrl
		},
		handleUploadDefeat(key) {
			this.dialogData[key] = ''
			this.$message.error('图片上传失败')
		},
		handleDeleteUpload(key) {
			this.dialogData[key] = ''
			this.$message.warning('图片已被移除')
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		}
	}
}
</script>
<style lang="scss" scoped>
::v-depp(.avatar-uploader) {
	width: 100px;
	height: 100px;
}
.dialogStyle {
	::v-deep .el-dialog__header {
		color: #5c5c5c;
		font-weight: 700;
	}
	::v-deep .el-dialog__body {
		padding: 0;
		form {
			padding: 0 30px;
		}
	}
	::v-deep .el-dialog__footer {
		text-align: center;
	}
}
::v-deep .ghost {
	opacity: 0.5;
	color: #fff;
	background: #b9e0f7;
}
</style>
